<template>
    <div class="password-box">
        <el-col :span="14">
            <!-- 医生角色 -->
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                <template v-if="!isDoctorFlag">
                    <el-form-item label="手机号" prop="mobile" :rules="[{ required: !isDoctorFlag, message: '请输入手机号', trigger: 'blur' }]">
                        <el-input v-model.trim="ruleForm.mobile" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="获取验证码" prop="smsCode" :rules="[ { required: !isDoctorFlag, message: '请输入验证码', trigger: 'blur' }]">
                        <div class="sms-code-box">
                            <el-input v-model.trim="ruleForm.smsCode" maxlength="11"></el-input>
                            <el-button class="code-btn" type="primary" :disabled="!(ruleForm.mobile && ruleForm.mobile.length == 11) || mobileVertify.send" @click="getSmsCode(ruleForm.mobile)">
                                <span v-show="!mobileVertify.send">获取验证码</span>
                                <span v-show="mobileVertify.send">{{mobileVertify.times}} s</span>
                            </el-button>
                        </div>
                    </el-form-item>
                </template>
                <el-form-item v-if="isDoctorFlag" label="当前密码" prop="nowPassword" :rules="[{ required: isDoctorFlag, message: '请输入当前密码', trigger: 'blur' }]">
                    <el-input v-model.trim="ruleForm.nowPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model.trim="ruleForm.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model.trim="ruleForm.confirmPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="btn-box">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</template>

<script>
    export default {
        name: 'changePassword',
        props: {},
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.confirmPassword) {
                        this.$refs.ruleForm.validateField('confirmPassword')
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                isDoctorFlag: this.$authInfo.getAuthType() == 'D', // 角色是否为医生
                doctorForm: {
                    newPassword: '',
                },

                ruleForm: {
                    mobile: '',
                    smsCode: '',
                    nowPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                },
                rules: {
                    newPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { validator: this.$validate.validatePwdBySave, trigger: 'change' }
                    ],
                    confirmPassword: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ],
                },
                mobileVertify: {
                    send: false,
                    times: 60
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.updatePassword()
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
            updatePassword() {
                let params = {
                    newPassword: this.ruleForm.newPassword,
                    confirmPassword: this.ruleForm.confirmPassword
                };


                if (this.isDoctorFlag) {
                    params.nowPassword = this.ruleForm.nowPassword;
                } else {
                    params.mobile = this.ruleForm.mobile;
                    params.smsCode = this.ruleForm.smsCode;
                }

                this.$ajax.updatePassword(params).then((res) => {
                    this.$util.message(res.msg, 'success')
                    this.$refs.ruleForm.resetFields();
                }).catch(err => {
                    this.$message({
                        message: err.msg,
                        type: "error",
                    });
                });
            },
            getSmsCode(phone) {
                if (!this.mobileVertify.send) {
                    this.mobileVertify.times = 60;
                    this.mobileVertify.send = true;

                    /* 获取倒计时 */
                    let timer = null;
                    timer = setInterval(() => {
                        this.mobileVertify.times--;
                        if (this.mobileVertify.times <= 0) {
                            clearInterval(timer);
                            this.mobileVertify.send = false;
                        }
                    }, 1000);
                    // console.log(this.mobileVertify)
                    this.$ajax.getPhoneCaptcha({
                        mobile: phone,
                        type: this.$authInfo.getAuthTypeNo()
                    }).then(res => {
                        this.$message({
                            message: res.msg,
                            type: "success",
                        });
                    }).catch(err => {
                        this.$message({
                            message: err.msg,
                            type: "error",
                        });
                    });
                }

            }
        }
    }
</script>

<style lang='scss' scoped>
    .btn-box {
        text-align: center;
    }

    .sms-code-box {
        display: flex;

        .code-btn {
            margin-left: 12px;
        }
    }
</style>